<template>
  <el-dialog
    class="nodeTagDialog"
    title="标签"
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '50%'"
    :top="isMobile ? '20px' : '15vh'"
  >
    <el-input
      v-model="tag"
      @keyup.enter="add"
      @keyup.stop
      @keydown.stop
      :disabled="tagArr.length >= max"
      placeholder="请按回车键添加"
    />
    <div class="tagList">
      <div
        class="tagItem"
        v-for="(item, index) in tagArr"
        :key="index"
        :style="{
          backgroundColor: generateColorByContent(item)
        }"
      >
        {{ item }}
        <div class="delBtn" @click="del(index)">
          <span class="iconfont-chaojizhiku iconshanchu" />
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { generateColorByContent, isMobile } from "simple-mind-map/src/utils/index"

/**
 * @Desc: 节点标签内容设置
 */
export default {
  name: "NodeTag",
  data() {
    return {
      dialogVisible: false,
      tagArr: [],
      tag: "",
      activeNodes: [],
      max: 5,
      isMobile: isMobile()
    }
  },
  watch: {
    dialogVisible(val, oldVal) {
      if (!val && oldVal) {
        this.$bus.$emit("endTextEdit")
      }
    }
  },
  created() {
    this.$bus.$on("node_active", this.handleNodeActive)
    this.$bus.$on("showNodeTag", this.handleShowNodeTag)
  },
  beforeUnmount() {
    this.$bus.$off("node_active", this.handleNodeActive)
    this.$bus.$off("showNodeTag", this.handleShowNodeTag)
  },
  methods: {
    generateColorByContent,

    handleNodeActive(args) {
      if (args) {
        this.activeNodes = [...args[1]]
        if (this.activeNodes.length > 0) {
          const firstNode = this.activeNodes[0]
          this.tagArr = firstNode.getData("tag") || []
        } else {
          this.tagArr = []
          this.tag = ""
        }
      } else {
        this.activeNodes = null
      }
    },

    handleShowNodeTag() {
      this.$bus.$emit("startTextEdit")
      this.dialogVisible = true
    },

    /**
     * @Desc: 添加
     */
    add() {
      this.tagArr.push(this.tag)
      this.tag = ""
    },

    /**
     * @Desc: 删除
     */
    del(index) {
      this.tagArr.splice(index, 1)
    },

    /**
     * @Desc: 取消
     */
    cancel() {
      this.dialogVisible = false
    },

    /**
     * @Desc:  确定
     */
    confirm() {
      this.activeNodes.forEach((node) => {
        node.setTag(this.tagArr)
      })
      this.cancel()
    }
  }
}
</script>

<style lang="less" scoped>
.nodeTagDialog {
  .tagList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;

    .tagItem {
      position: relative;
      padding: 3px 5px;
      margin-right: 5px;
      margin-bottom: 5px;
      color: #fff;

      .delBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        visibility: hidden;
      }

      &:hover {
        .delBtn {
          visibility: visible;
        }
      }
    }
  }
}
</style>
